<template>


    <div class="product-container">





            <h1>
                  YHDN ERP 添加商品
            </h1>

            <el-table   :data="tableData" border>
                <template #append>

              
             <div class="toolbar">
                   <el-button type="primary" icon="plus" @click="addRow" :disabled="isEditing">添加商品</el-button>
                <el-button type="primary" icon="document" @click="saveRows" :disabled="isEditing || tableData.length == 0">提交数据</el-button>
             </div>
            

                </template>

                <el-table-column type="selection">


                </el-table-column>
                <el-table-column label="品名" width="200">

                    <template #default="scope">
                        <el-input v-if="scope.row.isEditing" v-model="scope.row.name" placeholder=""
                            size="small" />
                        <div class="cell" v-else>
                            <span>{{ scope.row.name }}</span>
                        </div>
                    </template>

                </el-table-column>
                <el-table-column label="单位" width="100">

                    <template #default="scope">
                        <el-input v-if="scope.row.isEditing" v-model="scope.row.unit" placeholder=""
                            size="small" />
                        <div class="cell" v-else>
                            <span>{{ scope.row.unit }}</span>
                        </div>
                    </template>

                </el-table-column>
                <el-table-column label="ALIAS" width="100">

                    <template #default="scope">
                        <el-input v-if="scope.row.isEditing" v-model="scope.row.alias" placeholder=""
                            size="small" />
                        <div class="cell" v-else>
                            <span>{{ scope.row.alias }}</span>
                        </div>
                    </template>

                </el-table-column>
                <el-table-column label="PRICE" width="100">

                    <template #default="scope">
                        <el-input v-if="scope.row.isEditing" v-model="scope.row.price" placeholder=""
                            size="small" />
                        <div class="cell" v-else>
                            <span>{{ scope.row.price }}</span>
                        </div>
                    </template>

                </el-table-column>
                <el-table-column label="COMMENT">

                    <template #default="scope">
                        <el-input v-if="scope.row.isEditing" v-model="scope.row.comment" placeholder=""
                            size="small" />
                        <div class="cell" v-else>
                            <span>{{ scope.row.comment }}</span>
                        </div>
                    </template>
                </el-table-column>



                    <el-table-column>
                          <template #header>
        <el-input  size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button type="success" icon="edit" size="small" @click="editRow(scope.row)" :disabled="scope.row.isEditing || isEditing">
          编辑
        </el-button>
        <el-button
          size="small"
          icon="delete"
          type="danger"
          :disabled="isEditing"
          @click="deleteRow(scope.$index, scope.row)"
        >
          删除
        </el-button>
        <el-button
          size="small"
          type="primary"
          icon="document"
          :disabled="!scope.row.isEditing"
          @click="saveRow(scope.row)"

        >
          保存
        </el-button>
      </template>
    </el-table-column>


            </el-table>







    </div>








</template>

<script setup>

import { computed, ref, reactive } from 'vue';
import {Dexie} from 'dexie'

const db = new Dexie("yhdnck")
db.version(1).stores({
    product:'++id,&name,alias,price,comment,unit',
    
})

const tableData = ref([])

const addRow = () => {


    tableData.value.push({
        name: "",
        unit: "个",
        alias: "",
        price: "",
        comment: "三年质保",
        isEditing: true
    })

}

const saveRow = (row)=>{
    
    row.isEditing = false
    
}
const editRow = (row)=>{
    
    row.isEditing = true
    
}
const deleteRow = (index,row)=>{
    
   tableData.value.splice(index,1)
    
}

const saveRows = async ()=>{

    try

    {
        
        let rows = []

        tableData.value.forEach(row=>{

            const {isEditing,...item} = row
            rows.push(item)
        })

        console.log(rows)
        db.product.bulkAdd(rows)

        
    }
    catch(error)
    {
        console.log(error);
        
    }
}

//计算属性
const isEditing = computed(()=>{

    return tableData.value.some(row=>row.isEditing)

})

</script>

<style scoped>



.cell {
    display: flex;
    align-items: center;
}

.product-container{

    padding: 100px 0;
    
}

.el-table
{
    width: 80%;
    margin: 0 auto;
}


.el-button-group{

    padding: 10px;
}

h1{
    text-align: center;
    color: white;
}

.toolbar{
    padding: 20px;
}

</style>